<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, user-scalable=no">
    <title>排行榜</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
    <script src="__STATIC__/jquery.js?1"></script>
    <script src="__STATIC__/js/swiper.js?1"></script>
    <script src="__STATIC__/js/vue.js?1"></script>
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
    
</head>
<style type="text/css">
    .content .top {
        height:120px;
        background-color: purple;
    }
    .item{
        width: 100%;
        font-size: 16px;
    }
    .item >span{
        display: inline-block;
    }
    .item .img{
        width: 50px;
        height: 50px;
        display: inline-block;
        border-radius: 24px;
        overflow: hidden;
        margin-left: 10px;
    }
    .num{
        display: inline-block;
        border-radius: 20px;
        position: relative;
        top: -19px;
        background-color: #ffdd00;
        text-align: center;
        width: 30px;
        height: 30px;
        line-height: 30px;
        color: white;
    }
    .item .img img{
        width: 100%;
        height: 100%;
    }
    .item .info{
        width: 50%;
        overflow: hidden;
    }
    .item .score{
        width: 50%;
        text-align: center;
    }
    .info .name{
        position: relative;
        top: -16px;
        left: 20px;
        font-size: 12px;
        overflow: hidden;
    }
    .score .point{
        position: relative;
        top: -24px;
        left: 30px;
        color: #e85050;
    }
    .score .time{
        position: relative;
        color: #c5b7b7;
        font-size: 12px;
        top: 10px;
        left: 14px;
    }
    .bronze{
        background-color:#ea5a2d;
    }
    .silver{
        background-color:#d4dfe0;
    }

</style>

<body>
    <div class="content">
        <div class="top"></div>
        {volist name="data" id="item"}
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="item">
                    <span class="info"><span class="num">{$key+1}</span><span class="img"><img src="{$item.headimgurl?$item.headimgurl:$default_img}"/></span><span class="name">{$item.wechat_name?$item.wechat_name:"未知用户"}</span></span><span class="score"><span class="point">{$item.score}分</span><span class="time">{$item.createtime}</span></span>
                </div>
            </div>
        </div>
        {/volist}
    </div>
</body>
</html>
